<template>
    <div>
          <div id="title">
            <div class="left" @click="$router.back()">
                <van-icon id="iconcccon" color="#fff" size="16" name="arrow-left" />
            </div>
            <div class="box1">我的收藏</div>
            <div class="box2"></div>
        </div>
        <van-list id="Collect" v-model="loading" :finished="finished" finished-text="没有更多" @load="onLoad" :immediate-check="false" >
          <FindRoom  @goToTheDetail="ReallygoToTheDetail"  v-for="(item,index) in CollectList" :key="index" :picList="item" :id="item.houseCode" />
      </van-list>
    </div>
</template>

<script>
import FindRoom from "@/components/FindRoom.vue"
import {CollectListApi} from "@/api/FindRoom"
export default {
    props: {

    },
    data() {
        return {
          finished:false,
          loading:true,
          CollectList:[]
        };
    },
    components: {
      FindRoom
    },
    created() {
        this.getCollectList()
    },
    methods: {
        async getCollectList () {
        try {
          const list = await CollectListApi()    
          // console.log(list);
          const newlist = list.body.filter(item => item.houseImg = `http://liufusong.top:8080${item.houseImg}`)
          this.CollectList = newlist
          // console.log(this.picList);
        } catch(e) {
            console.log(e);
         }
        },
        ReallygoToTheDetail(id) {
          this.picList=[]
          this.finished= false
          this.loading = false
          this.params.cur_page = 1
          this.$router.push(`/detail/${id}`)
        },
        onLoad() {

        }
    },
    computed: {

    },
    mounted() {

    },
    watch: {

    },
};
</script>

<style scoped >
#Collect {
  margin-top: 45px;
}
#title {
    width: 100%;
    height: 45px;
    background-color: #21b97a;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
}
#title .left {
    flex: 1;
    line-height: 45px;
}
#title #iconcccon {
    margin-left: 16px;
}
#title .box1 {
    text-align: center;
    color: #fff;
    line-height: 45px;
    flex: 1;
}
#title .box2 {
    flex: 1;
}
</style>
